<template>
  <el-card shadow="hover" :body-style="{height:'100%'}">
    <section class="section">
      <aside class="aside">
        <el-scrollbar :height="$tableHeight + 40">
          <div style="margin: 10px 0;" v-for="(item,index) in data?.data">
            <el-link @click="handleChange(index)">{{item.name}}</el-link>
          </div>
        </el-scrollbar>
      </aside>
      <main class="main">
        <el-scrollbar :height="$tableHeight + 40">
        <el-row :ref="el => titleRef[index] = el.$el"  v-for="(item,index) in data?.data">
          <el-divider content-position="left">{{item.name}}</el-divider>
          <el-col :span="6" v-for="item in item.children">
            <el-card shadow="hover" @click="handleLink(item)">
              <nav class="box">
                <div class="title">
<!--                  <img class="icon" :src="item.icon" alt="">-->
                  <strong class="name">{{item.name}}</strong>
                </div>
                <span class="label">{{item.label}}</span>
              </nav>
            </el-card>
          </el-col>
        </el-row>
        </el-scrollbar>
      </main>
    </section>
  </el-card>
</template>


<script setup lang="ts">
import { getNavListApi } from "@/views/system/nav/api";
import {useRequest} from "vue-request";

const { data, run ,loading} = useRequest(getNavListApi);

const titleRef = ref<HTMLDivElement[]>([])


const handleLink = ({href}) => {
  open(href)
}


const handleChange = (index:number) => {
  titleRef.value[index].scrollIntoView({behavior: 'smooth'})
}



















</script>

<style scoped lang="less">
.section{
  display: flex;
  justify-content: flex-start;
  .aside{
    box-sizing: border-box;
    padding-top: 20px;
    width: 15%;
  }
  .main{
    width: 85%;
    .box{
      height: 120px;
      .title{
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
    }
    .nav-title{
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
    }
    .name{
      font-size: 18px;
      margin-left: 5px;
      color: #3273dc;
    }
    .icon{
      width: 50px;
      height: 50px;
    }
    .label{
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #7a808e;
    }
  }
}
</style>
